// 从零开始做权限控制
import router from './router'
import store from './store'
import NProgress from 'nprogress'
import 'nprogress/nprogress.css' // 引入进度条样式
// 导入动态路由表（包含所有可选的未经过滤的路由表
import { asyncRoutes } from '@/router/index'
// 路由全局前置导航守卫
const whiteList = ['/login', '/404']
router.beforeEach(async(to, from, next) => {
  // to 去哪里   from 从哪里来   next 放行方法
  // 开启滚动条
  NProgress.start()

  const token = store.getters.token
  if (token) {
    // 有token
    if (to.path === '/login') {
      // 有token且去往登录 则跳转到首页
      next('/')
    } else {
      // 有token但是不是去登录 直接放行
      // 用户信息获取到之后 存入vuex 如果发现vuex中有数据 切换路由的时候就不要重复请求了
      if (!store.state.user.userInfo.userId) {
        const res = await store.dispatch('user/asyncGetUserInfo')
        // 拿到菜单权限数据 res.roles.menus
        const menus = res.roles.menus
        // 以菜单权限为主对动态路由表做过滤处理 筛选出符合条件的项
        const filterRoutes = asyncRoutes.filter(item => {
          return menus.includes(item.children[0].name)
        })
        store.commit('menus/setMenuList', filterRoutes)
        // 动态路由表需要做权限控制 初始化时应只要静态路由表
        // 把动态路由添加到应用的路由系统里
        router.addRoutes([...filterRoutes, { path: '*', redirect: '/404', hidden: true }])
        // 修复刷新白屏bug
        next({
          ...to, // next({ ...to })的目的,是保证路由添加完了再进入页面 (可以理解为重进一次)
          replace: true // 覆盖上一次的记录
        })
        return
      }
      next()
    }
  } else {
    // 没有token
    // 如果在白名单内 直接放行
    if (whiteList.includes(to.path)) {
      next()
    } else {
      // 不在白名单内 跳转到登录页
      next('/login')
    }
  }
  // 关闭进度条
  NProgress.done()
})
